<template>
  <div class="scholarship bsb">
    <div class="scholarshipCard por">
      <!--用户信息-->
      <div class="info">
        <img :src="userInfo.icon" class="logo vam fl" alt="">
        <div>{{wxUserInfo.nickname}}</div>
        <div class="userid">(UID:{{userInfo.username}})</div>
      </div>
      <div class="money poa r0">
        <div class="number">￥{{info.amount_all || 0}}</div>
        <div class="whole">奖学金总额</div>
      </div>
      <!-- 提现，余额 -->
      <div class="leftMoney por tac">
        <ul class="flex">
          <li v-for="(item, key) in moneyNumberObj" :key="key">
            <div>{{item}}</div>
            <div class="moneyNumber">￥{{info[key] || 0}}</div>
          </li>
        </ul>
        <div class="icon poa bsb" @click="showTips">?</div>
      </div>
      <div class="cashOut flex jcb">
        <div class="takeOut tac" @click="cashOutEvent">
          <span class="iconfont icon-tixian"></span>提现
        </div>
        <div class="record" @click="jumpToCashOutRecord">
          <span class="iconfont icon-jilu"></span>提现记录
        </div>
      </div>
    </div>
    <!-- 我的邀请 -->
    <div class="myInvitation">
      <div class="invitation">我的邀请</div>
      <div class="invitationList">
        <div class="register">
          <ul class="flex">
            <li class="tac flex-1" v-for="(item, key) in statusObj" :key="key">
              <div class="number">{{info[key] || 0}}</div>
              <div class="status">{{item}}</div>
            </li>
          </ul>
        </div>
        <!-- 邀请用户列表 -->
        <div class="list">
          <div class="userinfo" v-show="userInfoList.length>0">
            <ul class="ul ova">
              <li v-for="(item,index) in userInfoList" :key="index" class="user-list-item li clearfix">
                <img :src="item.icon" alt="" class="userlogo fl vam">
                <div :class="'number' + item.status" class="fr">￥{{item.commission.toFixed(2)}}</div>
                <div class="name-state">
                  <div class="name wot1 fl">{{item.nickname}}</div>
                  <div :class="'state' + item.status" class="dib vat">
                    {{stateArr[item.status] || item.status}}
                  </div>
                </div>
                <div class="time">{{item.time}}</div>
              </li>
            </ul>
          </div>
          <!--<div class="noInviteRecord tac" v-show="!userInfoList.length">-->
            <!--<img class="noInvitePng" src="../../../static/images/noInvite.png" alt="">-->
            <!--<div class="inviteNow fix-c" @click="inviteNow">立即邀请</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {isChannel} from '@/config/config';

  export default {
    data() {
      return {
        moneyNumberObj: {
          amount_cash: '已提现',
          amount_account: '余额(已到账)',
          amount_not_account: '余额(未到账)'
        },
        statusObj: {
          u_count: '已注册',
          f_count: '已付费',
          t_count: '已退款',
        },
        stateArr: ['', '已注册', '已失效', '已付款', '已退款'],
        info: {},
        userInfoList: [],
        monthCount: 0
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'productInfo', 'wxUserInfo'])
    },
    created() {
      if(isChannel && this.productInfo.channel_id !== 23) return this.$router.go(-1);

      this.util.login('', this.$route.fullPath).then(user => {
        this.getConfig();
        this.getScholarshipData();
      }).catch(console.log);
    },
    methods: {
      // 获取提现配置
      getConfig() {
        this.http.$post('wxcat/api/get_invite', {
          product_id: this.productInfo.product_id,
        }).then(res => {
          this.monthCount = res.end_period;
        }).catch(this.$err);
      },
      //获取奖学金页面数据
      getScholarshipData() {
        this.http.$post("wxcat/api/get_amount", {
          uid: this.userInfo.uid,
          product_id: this.productInfo.product_id
        }).then((res) => {
          this.info = res;
          this.userInfoList.push(...res.invite_user_list);
        }).catch(this.$err);
      },
      //未到账余额说明
      showTips() {
        this.$dialog({
          message: `由于订单的完成时间为${this.monthCount}天，所以邀请的用户购买会员后${this.monthCount}天内没有退款，获得的奖励金才能提现。`,
          showConfirmButton: false,
          closeOnClickOverlay: true,
          messageAlign: 'left'
        }).catch(console.log)
      },
      //提现按钮跳转到提现页面
      cashOutEvent() {
        this.$router.push({
          name: 'CashOut',
          query: {
            token: (100 * this.info.amount_account || 0).toString(36)
          }
        });
      },
      //跳转到提现记录页面
      jumpToCashOutRecord() {
        this.$router.push("/cashoutrecord");
      },
      inviteNow() {
        this.$router.push("/invitation");
      }
    },
  }
</script>
<style lang="less" scoped>
  .scholarship {
    padding: .94rem;
    background-color: #f3f2ef;
    min-height: 100vh;
    .scholarshipCard {
      width: 100%;
      padding-bottom: .66rem;
      background-image: linear-gradient(-30deg,
      #ffb808 0%,
      #ff8611 100%);
      border-radius: .63rem;
      .info {
        padding: 1rem 1rem 0;
        color: #fff;
        font-size: 1.03rem;
        height: 3.09rem;
        line-height: 1.5rem;
        .logo {
          margin-right: .96rem;
          width: 3.09rem;
          height: 3.09rem;
          border-radius: 50%;
        }
        .userid {
          font-size: .81rem;
        }
      }
      .money {
        top: 1.03rem;
        padding: .47rem .47rem .47rem 1.16rem;
        background-color: rgba(255, 255, 255, .8);
        border-radius: 1.41rem 0 0 1.41rem;
        color: #ff6c00;
        line-height: 1;
        font-size: 1.13rem;
        .whole {
          margin-top: .25rem;
          font-size: .75rem;
        }
      }
      .leftMoney {
        color: #fff;
        font-size: .75rem;
        margin-top: 1.56rem;
        &:after {
          content: "";
          display: inline-block;
          width: 90%;
          height: 1px;
          color: #fff;
          border-bottom: 1px dashed #fff;
        }
        ul {
          width: 100%;
          li {
            flex: 1;
            border-left: .06rem solid #fff;
            .moneyNumber {
              font-size: 1.25rem;
            }
          }
          //注意是与li同级的
          li:nth-child(1) {
            border-left: none;
          }
        }
        .icon {
          width: .9rem;
          height: .9rem;
          line-height: .81rem;
          border: 1px solid #fff;
          border-radius: 50%;
          top: .2rem;
          right: .5rem;
        }
      }
      .cashOut {
        font-size: .88rem;
        margin: .66rem 4.75rem 0 4.72rem;
        // display: flex 之后就没有块级与行内元素之分，所以text-align: center没有效果
        // text-align: center;
        .takeOut {
          width: 5.63em;
          height: 1.81rem;
          line-height: 1.81rem;
          color: #ff8611;
          background-color: #fff;
          border-radius: .31rem;
        }
        .record {
          height: 1.81rem;
          line-height: 1.81rem;
          color: #fff;
        }
        .iconfont {
          margin-right: .3rem;
        }
      }
    }
    .myInvitation {
      margin-top: 1.66rem;
      .invitation {
        font-size: 1rem;
        color: #666;
      }
      .invitationList {
        background-color: #fff;
        margin-top: .63rem;
        border-radius: .63rem;
        .register {
          padding: 1.66rem 0;
          width: 90%;
          border-bottom: .03rem solid #eee;
          margin: 0 auto;
          ul {
            li {
              .number {
                color: #ff8611;
                font-size: 1.56rem;
                font-family: DINCondensedC;
              }
              .status {
                font-size: .81rem;
                color: #666;
              }
            }
          }
        }
        .userinfo {
          font-size: 1rem;
          margin: 0 .97rem;
          padding-bottom: .97rem;
          .user-list-item {
            padding: .94rem 0;
            border-bottom: .03rem solid #eee;
          }
          .ul {
            max-height: 14.75rem;
          }
          .userlogo {
            margin-right: .4rem;
            width: 2.32rem;
            height: 2.32rem;
            background-color: #fff;
            border-radius: 50%;
          }

          .name-state {
            .name {
              margin-right: .28rem;
              max-width: 42vw;
              font-size: .94rem;
              line-height: .94rem;
              color: #333;
            }
            [class*=state] {
              padding: 0 .16rem;
              height: .94rem;
              line-height: .94rem;
              border-radius: .2rem;
              font-size: .75rem;
              color: #bbb;
              background-color: #f2f2f2;
            }
            .state1 {
              color: #f5920d;
              background-color: #ffe5c3;
            }
            .state3 {
              color: #2fbe2f;
              background-color: #daffda;
            }
          }

          .time {
            font-size: .81rem;
            color: #b3b3b3;
          }

          [class*=number] {
            line-height: 2.28rem;
            font-size: 1.13rem;
            color: #333;
          }
          .number1 {
            color: #000;
          }
          .number3 {
            color: #2fbe2f;
          }
        }
        .noInviteRecord {
          height: 15rem;
          .noInvitePng {
            margin-top: 1.5rem;
            width: 12.5rem;
            height: 13.03rem;
          }
          .inviteNow {
            bottom: .63rem;
            width: 20.63rem;
            height: 2.75rem;
            line-height: 2.75rem;
            font-size: 1.25rem;
            color: #fff;
            background-image: url("../../../static/images/mipmap_xhdpi/btn_lijiyaoqing.png");
            background-size: 100% 100%;
            animation: identifier 2s linear infinite;
          }
          @keyframes identifier {
            20% {
              transform: translateX(-50%) scale(0.95)
            }
            40% {
              transform: translateX(-50%) scale(1)
            }
            70% {
              transform: translateX(-50%) scale(0.95)
            }
            100% {
              transform: translateX(-50%) scale(1);
            }
          }
        }
      }
    }
  }
</style>

